<template>
  <view class="card-buy-container">
    <!-- 会员卡列表 -->
    <view class="card-list">
      <!-- 会员卡卡片 -->
      <view
          class="card-item"
          v-for="(card, index) in cardList"
          :key="index"
          @click="handleCardClick(card)"
      >
        <!-- 卡片头部：卡名 + 卡类型 -->
        <view class="card-header">
          <text class="card-name">{{ card.name }}</text>
          <text class="card-type">{{ card.type }}</text>
          <text class="card-have" v-if="card.isHave === '拥有'&&card.value != null">❤</text>
        </view>

        <!-- 卡片主体：卡值 + 单位 -->
        <view class="card-body">
          <text class="card-value">{{ card.value || '书籍资料'}}</text>
          <text class="card-unit">{{ card.unit || ' '}}</text>
        </view>

        <!-- 卡片底部：价格 + 销量 -->
        <view class="card-footer">
          <text class="card-price">¥{{ card.price }}</text>
          <text class="card-sales">已售 {{ card.num || 0 }} 份</text>
        </view>
      </view>

      <!-- 空数据/加载失败提示 -->
      <view class="empty-tip" v-if="!loading && cardList.length === 0">
        <text>{{ emptyTipText }}</text>
      </view>
    </view>

    <!-- 购买确认弹窗 -->
    <view
        class="popup-mask"
        v-if="buyPopupVisible"
        @click="buyPopupVisible = false"
    ></view>

    <!-- 弹窗主体：固定定位+居中，层级高于遮罩 -->
    <view
        class="buy-popup-container"
        v-if="buyPopupVisible"
    >
      <view class="buy-popup">
        <!-- 弹窗标题 -->
        <view class="popup-title-bar">
          <text class="title">确认购买</text>
        </view>

        <!-- 选中卡片信息（保持原逻辑不变） -->
        <view class="card-info" v-if="selectedCard">
          <view class="info-item">
            <text class="info-label">卡名：</text>
            <text class="info-content">{{ selectedCard.name }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">类型：</text>
            <text class="info-content">{{ selectedCard.type }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">规格：</text>
            <text class="info-content">{{ (selectedCard.value + selectedCard.unit) || '本' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">价格：</text>
            <text class="info-content price-highlight">¥{{ selectedCard.price }}</text>
          </view>
        </view>

        <!-- 弹窗按钮组（保持原逻辑不变） -->
        <view class="popup-btns">
          <button class="btn-cancel" @click="buyPopupVisible = false">取消</button>
          <button class="btn-confirm" @click="handleBuySubmit">确认购买</button>
        </view>
      </view>
    </view>

    <!-- 加载中提示 -->
    <uni-loading-icon v-if="loading" text="加载会员卡中..." size="24"></uni-loading-icon>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 会员卡列表数据
      cardList: [],
      // 搜索关键词（卡名）
      searchName: '',
      // 选中的会员卡
      selectedCard: null,
      // 购买弹窗显示状态
      buyPopupVisible: false,
      // 加载状态
      loading: true,
      // 空数据提示文本
      emptyTipText: '暂无会员卡数据'
    };
  },
  onLoad() {
    // 页面加载时初始化会员卡数据
    this.loadCardList();
  },
  onShow() {
    // 每次页面显示时都会执行，保证数据实时刷新
    this.loadCardList();
  },
  methods: {
    /**
     * 加载会员卡列表（参考sysRoom/selectPage请求方式）
     * @param {Number} pageNum - 当前页码（默认1）
     * @param {Number} pageSize - 每页条数（默认20）
     */
    loadCardList() {
      this.$request.get('/card/selectAll').then(res => {
        this.cardList = res.data || [];
      }).catch(e => {
        this.cardList = [];
      }).finally(() => {
      });
    },

    handleCardClick(card) {
      if (card.isHave === '拥有'&&card.value != null) {
        uni.showToast({title: '你已拥有此卡！', icon: 'none'});
        return
      }
      // 深拷贝卡片数据，避免修改原数据
      this.selectedCard = JSON.parse(JSON.stringify(card));
      // 显示购买弹窗
      this.buyPopupVisible = true;
    },

    /**
     * 确认购买 - 调用cardOrder/add接口（POST请求）
     */
    handleBuySubmit() {

      uni.showLoading({title: '提交中...'});
      this.$request.post('/cardOrder/add', {
        cardId: this.selectedCard.id
      }).then(res => {
            if (res.code === '200') {
              uni.showToast({title: '购买成功！', icon: 'success'});
              // 关闭弹窗
              this.buyPopupVisible = false;
              // 重新加载会员卡列表（更新销量）
              this.loadCardList();
            } else {
              uni.showToast({title: res.msg || '购买失败', icon: 'none'});
            }
          })
          .finally(() => {
            uni.hideLoading();
          });
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.card-buy-container {
  padding: 16rpx;
  background-color: #f7f8fa;
  min-height: 100vh;
}

/* 搜索栏样式 */
.search-bar {
  margin-bottom: 24rpx;
}

/* 会员卡列表 */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280rpx, 1fr));
  gap: 20rpx;
}

/* 会员卡卡片 */
.card-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.card-item:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.card-type {
  font-size: 22rpx;
  color: #fff;
  background-color: #2d8cf0;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.card-have {
  font-size: 22rpx;
  color: #fff;
  background-color: #ffc400;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

/* 卡片主体 */
.card-body {
  margin-bottom: 20rpx;
}

.card-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #ff5722;
}

.card-unit {
  font-size: 24rpx;
  color: #666;
  margin-left: 8rpx;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-price {
  font-size: 28rpx;
  font-weight: 600;
  color: #ff5722;
}

.card-sales {
  font-size: 22rpx;
  color: #999;
}

/* 空数据提示 */
.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 24rpx;
}

/* 购买确认弹窗 */
.buy-popup {
  width: 620rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.popup-title-bar {
  text-align: center;
  margin-bottom: 32rpx;
}

.popup-title-bar .title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

/* 弹窗卡片信息 */
.card-info {
  margin-bottom: 36rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
}

.info-content {
  font-size: 24rpx;
  color: #333;
}

.price-highlight {
  color: #ff5722;
  font-weight: 600;
}

/* 弹窗按钮组 */
.popup-btns {
  display: flex;
  justify-content: space-between;
}

.btn-cancel, .btn-confirm {
  width: 240rpx;
  height: 72rpx;
  border-radius: 36rpx;
  font-size: 24rpx;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

.btn-confirm {
  background-color: #2d8cf0;
  color: #fff;
}

/* 加载中提示定位 */
uni-loading-icon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

/* 弹窗遮罩层：全屏覆盖，半透明，防止背景点击 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 999; /* 遮罩层级：低于弹窗，高于页面内容 */
}

/* 弹窗容器：固定定位+居中 */
.buy-popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex; /* 利用flex实现子元素居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 1000; /* 弹窗层级：高于遮罩层 */
  padding: 40rpx; /* 防止弹窗过宽超出屏幕 */
}

/* 弹窗主体：白色背景，圆角，阴影 */
.buy-popup {
  width: 100%;
  max-width: 620rpx; /* 限制弹窗最大宽度（适配大屏） */
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 增强弹窗立体感 */
}

/* （可选）优化按钮样式，避免原生button默认边距 */
.btn-cancel, .btn-confirm {
  border: none; /* 清除原生button边框 */
}

.btn-cancel::after, .btn-confirm::after {
  border: none; /* 清除原生button点击反馈边框 */
}
</style>